<template>
  <el-dialog :model-value="visible" :close-on-click-modal="false" :show-close="false"
    style="border-radius: 15px;padding: 0 20px;width: 600px;">
    <template #header="{ titleId }">
      <div class="my-header">
        <span :id="titleId">添加事件</span>
        <el-button type="default" @click="close" style="margin-right: -20px;">
          <icon-ic-baseline-close />
        </el-button>
      </div>
    </template>
    <slot />
    <template #footer>
      <!-- <span class="dialog-footer">
        <el-button type="primary" @click="submit">
          保存事件
        </el-button>
      </span> -->
      <slot name="footer" />
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
const props = defineProps<{ visible: boolean }>()
const emits = defineEmits(["update:visible", "submit"])

function close() {
  emits("update:visible", false)
}

function submit() {
  emits("submit")
  emits("update:visible", false)

}

</script>

<style scoped lang="scss">
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;

  >span {
    font-size: 26px;
    font-weight: bold;
  }

  :deep(.el-button) {
    width: 40px;
    height: 40px;
    background-color: rgba($color: #f368e0, $alpha: .1);
    padding: 0;
  }
}
</style>